<template>
  <div class="hello">
    <el-button type="primary">按钮</el-button>
    <div>{{ activityList }}</div>
    <div id="char" style="width: 600px; height: 600px"></div>
  </div>
</template>

<script setup>
import axios from 'axios'
import { onMounted, ref } from 'vue';
import { ElButton } from 'element-plus'
import * as echarts from 'echarts/core';
import { BarChart, LineChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);

const activityList = ref(null);
const fetchData = async () => {
  try {
    const { data } = await axios.get('https://api.github.com/users/suiboyu');
    activityList.value = data;
  } catch (err) {
    // you can report use errorHandler or other
  }
};

onMounted(() => {
  fetchData();
})

onMounted(() => {
  const myChart = echarts.init(document.getElementById('char'));
  myChart.setOption({
    xAxis: {
      data: ["12", "27", "78", "89", "100", "134", "456"],
      // 隐藏x轴
      axisLine: {
        show: false,
      },
      // 刻度线
      axisTick: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      // 去除网格线
      splitLine: false,
      // 刻度线
      axisTick: {
        show: false,
      },
      // 隐藏y轴
      axisLine: {
        show: false,
      },
      // 隐藏刻度值
      axisLabel: {
        show: false,
      },
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: "line",
        smooth: true,
        symbol: "none",
        itemStyle: {
          normal: {
            lineStyle: {
              color: "#e5566a",
            },
          },
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#e5566a",
              },
              {
                offset: 1,
                color: "rgba(0, 0, 0, 0.1)",
              },
            ],
            global: false,
          },
        },
      },
    ],
  });
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
